<template>
  <el-dialog
    :title="addForm.id > 0 ? '编辑菜单' : '菜单添加'"
    v-model="dialogVisble"
    width="35%"
    :before-close="closeBox"
  >
    <div>
      <el-form
        ref="formRef"
        style="max-width: 500px"
        :model="addForm"
        :rules="roleRules"
        label-width="auto"
        class="demo-dynamic"
      >
        <el-form-item prop="pid" label="上级">
          <el-tree-select
            v-model="addForm.pid"
            :data="ruleMenu"
            :props="mProps"
            check-strictly
            :render-after-expand="false"
            placeholder="选择上级菜单"
          />
        </el-form-item>

        <el-form-item prop="title" label="菜单名称">
          <el-input v-model="addForm.title" />
        </el-form-item>

        <el-form-item prop="type" label="类型">
          <el-radio-group v-model="addForm.type" class="ml-4">
            <el-radio :value="0" size="large">方法</el-radio>
            <el-radio :value="1" size="large">菜单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="icon" label="图标">
          <el-col :span="1">
            <el-icon style="font-size: 16px" class="m-ico" v-if="addForm.icon !=''" >
              <component :is="addForm.icon"></component>
            </el-icon>
          </el-col>
          <el-col :span="20">
            <el-select v-model="addForm.icon" filterable clearable placeholder="请选择">
              <el-option v-for="icon in icons" :key="icon" :label="icon" :value="icon">
                <el-icon style="font-size: 16px" class="m-ico">
                  <component :is="icon"></component>
                </el-icon>
                {{ icon }}
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item prop="path" label="路径">
          <el-input v-model="addForm.path" />
          <el-text class="mx-1" type="info">规则: admin/menu/path</el-text>
        </el-form-item>

        <el-form-item prop="sort" label="序号">
          <el-input v-model="addForm.sort" />
          <el-text class="mx-1" type="info">默认：9999,数字越大越靠前</el-text>
        </el-form-item>

        <el-form-item label="状态" prop="state" v-if="addForm.id > 0">
          <el-switch v-model="addForm.state" active-text="启用" inactive-text="禁用" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeBox">取 消</el-button>
        <el-button type="primary" @click="submitForm(formRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import * as ElIcons from "@element-plus/icons-vue"; //图标
const icons = Object.keys(ElIcons); //获取图标

const pors = defineProps({
  showdialog: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Object,
    default: {
      id: 0,
      title: "", // 菜单名称
      path: "", //跳转路径
      icon: "", //图标标识
      pid: "", //上一级id
      type: 1, // 角色组说明
      state: "", //状态
      sort: 9999, //排序标识
    },
  },
  ruleMenu: {
    type: Array,
    default: [],
  }, //权限菜单数组
});
const formRef = ref<FormInstance>(); //定义form
//表单提交元素
const addForm = computed(() => pors.list);
// const addForm = reactive({});
//表单元素的规则
const roleRules = reactive({
  title: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur", //验证逻辑的触发方式
    }
  ],
  
});

const emits = defineEmits(["useConfirm", "useClose"]); //定义一个或多个自定义按钮事件 传递到父组件

const dialogVisble = ref(false); // 定义控制弹窗显隐的变量

const mProps = {
  label: "title",
  value: "id",
  // checkStrictly:true, //设置父子节点取消选中关联，从而达到选择任意一级选项的目的
}; //上级权限菜单组件设置

//关闭模态框
const closeBox = () => {
  if (!formRef) return;
  formRef.value.resetFields();
  dialogVisble.value = false; //重置为空
  emits("useClose", dialogVisble.value);
};

//确定/提交
const submitForm = (formData: FormInstance | undefined) => {
  if (!formData) return;
  //校验
  formData.validate((valid) => {
    if (valid) {
      // console.log(addForm.value, "556");

      dialogVisble.value = false;
      emits("useConfirm", addForm.value);
      formData.resetFields(); //重置为空
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

// 将变量暴露出来
defineExpose({
  dialogVisble,
});
</script>
